// Element Plus 样式覆盖

// 全局变量覆盖
:root {
  // 主色调
  --el-color-primary: #409EFF;
  --el-color-primary-light-3: #79bbff;
  --el-color-primary-light-5: #a0cfff;
  --el-color-primary-light-7: #c6e2ff;
  --el-color-primary-light-8: #d9ecff;
  --el-color-primary-light-9: #ecf5ff;
  --el-color-primary-dark-2: #337ecc;
  
  // 成功色
  --el-color-success: #67C23A;
  --el-color-success-light-3: #95d475;
  --el-color-success-light-5: #b3e19d;
  --el-color-success-light-7: #d1edc4;
  --el-color-success-light-8: #e1f3d8;
  --el-color-success-light-9: #f0f9eb;
  --el-color-success-dark-2: #529b2e;
  
  // 警告色
  --el-color-warning: #E6A23C;
  --el-color-warning-light-3: #eebe77;
  --el-color-warning-light-5: #f3d19e;
  --el-color-warning-light-7: #f8e3c5;
  --el-color-warning-light-8: #faecd8;
  --el-color-warning-light-9: #fdf6ec;
  --el-color-warning-dark-2: #b88230;
  
  // 危险色
  --el-color-danger: #F56C6C;
  --el-color-danger-light-3: #f89898;
  --el-color-danger-light-5: #fab6b6;
  --el-color-danger-light-7: #fcd3d3;
  --el-color-danger-light-8: #fde2e2;
  --el-color-danger-light-9: #fef0f0;
  --el-color-danger-dark-2: #c45656;
  
  // 信息色
  --el-color-info: #909399;
  --el-color-info-light-3: #b1b3b8;
  --el-color-info-light-5: #c8c9cc;
  --el-color-info-light-7: #dedfe0;
  --el-color-info-light-8: #e9e9eb;
  --el-color-info-light-9: #f4f4f5;
  --el-color-info-dark-2: #73767a;
  
  // 文本色
  --el-text-color-primary: #303133;
  --el-text-color-regular: #606266;
  --el-text-color-secondary: #909399;
  --el-text-color-placeholder: #A8ABB2;
  --el-text-color-disabled: #C0C4CC;
  
  // 背景色
  --el-bg-color: #ffffff;
  --el-bg-color-page: #f2f3f5;
  --el-bg-color-overlay: #ffffff;
  
  // 边框色
  --el-border-color: #DCDFE6;
  --el-border-color-light: #E4E7ED;
  --el-border-color-lighter: #EBEEF5;
  --el-border-color-extra-light: #F2F6FC;
  --el-border-color-dark: #D4D7DE;
  --el-border-color-darker: #CDD0D6;
  
  // 填充色
  --el-fill-color: #F0F2F5;
  --el-fill-color-light: #F5F7FA;
  --el-fill-color-lighter: #FAFAFA;
  --el-fill-color-extra-light: #FAFCFF;
  --el-fill-color-dark: #EBEDF0;
  --el-fill-color-darker: #E6E8EB;
  --el-fill-color-blank: #FFFFFF;
  
  // 字体
  --el-font-size-extra-large: 20px;
  --el-font-size-large: 18px;
  --el-font-size-medium: 16px;
  --el-font-size-base: 14px;
  --el-font-size-small: 13px;
  --el-font-size-extra-small: 12px;
  
  // 圆角
  --el-border-radius-base: 4px;
  --el-border-radius-small: 2px;
  --el-border-radius-round: 20px;
  --el-border-radius-circle: 100%;
}

// 按钮组件样式覆盖
.el-button {
  font-weight: 500;
  border-radius: 6px;
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-1px);
  }
  
  &:active {
    transform: translateY(0);
  }
  
  // 主要按钮
  &.el-button--primary {
    background: linear-gradient(135deg, var(--el-color-primary) 0%, var(--el-color-primary-dark-2) 100%);
    border: none;
    
    &:hover {
      background: linear-gradient(135deg, var(--el-color-primary-light-3) 0%, var(--el-color-primary) 100%);
    }
  }
  
  // 成功按钮
  &.el-button--success {
    background: linear-gradient(135deg, var(--el-color-success) 0%, var(--el-color-success-dark-2) 100%);
    border: none;
  }
  
  // 警告按钮
  &.el-button--warning {
    background: linear-gradient(135deg, var(--el-color-warning) 0%, var(--el-color-warning-dark-2) 100%);
    border: none;
  }
  
  // 危险按钮
  &.el-button--danger {
    background: linear-gradient(135deg, var(--el-color-danger) 0%, var(--el-color-danger-dark-2) 100%);
    border: none;
  }
  
  // 大尺寸按钮
  &.el-button--large {
    padding: 12px 24px;
    font-size: 16px;
    border-radius: 8px;
  }
  
  // 小尺寸按钮
  &.el-button--small {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 4px;
  }
}

// 输入框组件样式覆盖
.el-input {
  .el-input__wrapper {
    border-radius: 6px;
    transition: all 0.3s ease;
    
    &:hover {
      box-shadow: 0 0 0 1px var(--el-color-primary-light-7);
    }
    
    &.is-focus {
      box-shadow: 0 0 0 2px var(--el-color-primary-light-8);
    }
  }
  
  .el-input__inner {
    font-size: 14px;
    
    &::placeholder {
      color: var(--el-text-color-placeholder);
    }
  }
}

// 卡片组件样式覆盖
.el-card {
  border-radius: 12px;
  border: 1px solid var(--el-border-color-lighter);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
  
  &:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
  }
  
  .el-card__header {
    border-bottom: 1px solid var(--el-border-color-extra-light);
    padding: 20px;
  }
  
  .el-card__body {
    padding: 20px;
  }
}

// 表格组件样式覆盖
.el-table {
  border-radius: 8px;
  overflow: hidden;
  
  .el-table__header {
    th {
      background: var(--el-fill-color-light);
      color: var(--el-text-color-primary);
      font-weight: 600;
    }
  }
  
  .el-table__row {
    &:hover {
      background: var(--el-fill-color-extra-light);
    }
  }
  
  .el-table__cell {
    border-bottom: 1px solid var(--el-border-color-extra-light);
  }
}

// 分页组件样式覆盖
.el-pagination {
  .el-pager li {
    border-radius: 6px;
    margin: 0 2px;
    
    &.is-active {
      background: var(--el-color-primary);
      color: white;
    }
    
    &:hover {
      background: var(--el-color-primary-light-9);
      color: var(--el-color-primary);
    }
  }
  
  .btn-prev,
  .btn-next {
    border-radius: 6px;
    margin: 0 2px;
  }
}

// 对话框组件样式覆盖
.el-dialog {
  border-radius: 12px;
  overflow: hidden;
  
  .el-dialog__header {
    background: var(--el-fill-color-extra-light);
    padding: 20px 24px;
    border-bottom: 1px solid var(--el-border-color-extra-light);
    
    .el-dialog__title {
      font-size: 18px;
      font-weight: 600;
      color: var(--el-text-color-primary);
    }
  }
  
  .el-dialog__body {
    padding: 24px;
  }
  
  .el-dialog__footer {
    padding: 16px 24px;
    border-top: 1px solid var(--el-border-color-extra-light);
    background: var(--el-fill-color-extra-light);
  }
}

// 抽屉组件样式覆盖
.el-drawer {
  .el-drawer__header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--el-border-color-extra-light);
    margin-bottom: 0;
    
    .el-drawer__title {
      font-size: 18px;
      font-weight: 600;
      color: var(--el-text-color-primary);
    }
  }
  
  .el-drawer__body {
    padding: 24px;
  }
}

// 消息组件样式覆盖
.el-message {
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  border: none;
  
  &.el-message--success {
    background: var(--el-color-success-light-9);
    border-left: 4px solid var(--el-color-success);
  }
  
  &.el-message--warning {
    background: var(--el-color-warning-light-9);
    border-left: 4px solid var(--el-color-warning);
  }
  
  &.el-message--error {
    background: var(--el-color-danger-light-9);
    border-left: 4px solid var(--el-color-danger);
  }
  
  &.el-message--info {
    background: var(--el-color-info-light-9);
    border-left: 4px solid var(--el-color-info);
  }
}

// 通知组件样式覆盖
.el-notification {
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  border: none;
  
  .el-notification__title {
    font-weight: 600;
    color: var(--el-text-color-primary);
  }
  
  .el-notification__content {
    color: var(--el-text-color-regular);
  }
}

// 标签页组件样式覆盖
.el-tabs {
  .el-tabs__header {
    margin: 0 0 20px 0;
  }
  
  .el-tabs__nav-wrap {
    &::after {
      background: var(--el-border-color-extra-light);
    }
  }
  
  .el-tabs__item {
    padding: 0 20px;
    font-weight: 500;
    color: var(--el-text-color-secondary);
    
    &.is-active {
      color: var(--el-color-primary);
      font-weight: 600;
    }
    
    &:hover {
      color: var(--el-color-primary);
    }
  }
  
  .el-tabs__active-bar {
    background: var(--el-color-primary);
    height: 3px;
    border-radius: 2px;
  }
}

// 菜单组件样式覆盖
.el-menu {
  border: none;
  
  .el-menu-item {
    border-radius: 6px;
    margin: 2px 8px;
    
    &:hover {
      background: var(--el-color-primary-light-9);
      color: var(--el-color-primary);
    }
    
    &.is-active {
      background: var(--el-color-primary);
      color: white;
    }
  }
  
  .el-sub-menu__title {
    border-radius: 6px;
    margin: 2px 8px;
    
    &:hover {
      background: var(--el-color-primary-light-9);
      color: var(--el-color-primary);
    }
  }
}

// 步骤条组件样式覆盖
.el-steps {
  .el-step__head {
    .el-step__icon {
      border-radius: 50%;
      
      &.is-text {
        background: var(--el-color-primary);
        color: white;
        font-weight: 600;
      }
    }
  }
  
  .el-step__title {
    font-weight: 500;
    
    &.is-finish {
      color: var(--el-color-primary);
    }
    
    &.is-process {
      color: var(--el-color-primary);
      font-weight: 600;
    }
  }
}

// 加载组件样式覆盖
.el-loading-mask {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(2px);
  
  .el-loading-spinner {
    .circular {
      width: 50px;
      height: 50px;
    }
    
    .path {
      stroke: var(--el-color-primary);
      stroke-width: 3;
    }
  }
}

// 骨架屏组件样式覆盖
.el-skeleton {
  .el-skeleton__item {
    background: linear-gradient(90deg, var(--el-fill-color) 25%, var(--el-fill-color-light) 37%, var(--el-fill-color) 63%);
    background-size: 400% 100%;
    animation: skeleton-loading 1.4s ease infinite;
  }
}

@keyframes skeleton-loading {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

// 暗色主题适配
.dark {
  --el-bg-color: #141414;
  --el-bg-color-page: #0a0a0a;
  --el-bg-color-overlay: #1d1e1f;
  
  --el-text-color-primary: #E5EAF3;
  --el-text-color-regular: #CFD3DC;
  --el-text-color-secondary: #A3A6AD;
  --el-text-color-placeholder: #8D9095;
  --el-text-color-disabled: #6C6E72;
  
  --el-border-color: #4C4D4F;
  --el-border-color-light: #414243;
  --el-border-color-lighter: #363637;
  --el-border-color-extra-light: #2B2B2C;
  --el-border-color-dark: #58585B;
  --el-border-color-darker: #636466;
  
  --el-fill-color: #2D2D2F;
  --el-fill-color-light: #262629;
  --el-fill-color-lighter: #1D1D20;
  --el-fill-color-extra-light: #191919;
  --el-fill-color-dark: #39393D;
  --el-fill-color-darker: #424243;
  --el-fill-color-blank: #141414;
}
